Grid Layout

This grid layout contains six columns and three rows:

Header
Menu
Main
Right
Footer

Grid Elements

A Grid Layout must have a parent element with the display property set to grid or inline-grid.

Direct child element(s) of the grid container automatically becomes grid items.

1
2
3
4
5
6
7
8
9

The grid-column-gap Property:

1
2
3
4
5
6
7
8
9

Use the grid-column-gap property to adjust the space between the columns.

Grid Lines

1
2
3
4
5
6
7
8

You can refer to line numbers when placing grid items.

Grid Lines

1
2
3
4
5
6
7
8

You can refer to line numbers when placing grid items.